<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer</title>
<style>	 

 /* body {
  background-image:url(../images/我的音乐背景图.jpg);
  background-repeat:no-repeat;  背景图不重复
 background-repeat: repeat;默认。背景图像将在垂直方向(repate-y)和水平方向(repeat-x)重复。
  background-attachment:fixed 背景图不会随着滚动轴移动
  background-attachment:scroll  背景图随着滚动轴移动 
 
  } */
  .footer{
  	font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    background-color: #333;
    clear: both;
    color: #999;
  }
  .section_inner{
  	    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    max-width: 1200px;
    position: relative;
    margin: 0 50px;
    min-width: 900px;
  }
  .footer_info{
  	font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    overflow: hidden;
    border-bottom: 1px solid #353535;
    position: relative;
    padding-bottom: 45px;
  }
  .footer_copyright{
  	font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    padding: 24px 0;
  }
  p{
  	    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    margin: 0;
    padding: 0;
  }
  a{
  	font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    text-decoration: none;
    color: #999;
  }
  .footer_download{
  	font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    position: absolute;
    top: 0;
    left: 10px;
  }
  .footer_product{
  	font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    position: absolute;
    top: 0;
    width: 360px;
    left: 37.5%;
  }
.footer_group{
	    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    position: absolute;
    top: 300px;
    width: 304px;
    left: 37.5%;
}
.footer_link{
	    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    float: right;
    padding-bottom: 57px;
    width: 200px;
}
.footer_platform{
	    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 300px 0 0 10px;
}
.footer_tit{
	    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    padding: 80px 0 30px;
}
.footer_download_list{
	    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    margin-left: -25px;
}
.footer_download_list_item{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    text-align: center;
    position: relative;
}
}
.icon_txt{
      list-style: none;
    text-align: center;
    cursor: pointer;
    color: #999;
    font: 0/0 a;
}
.pc{
  width:65px;
  height:50px;     
  line-height: 150px;   /*行高，控制pc字样的位置  */     
  margin:0px 100px 100px 0px;  /*外边距  上右下左*/
  border-radius: 10px; /* 圆角矩形*/
 /* border:1px #e8e8e8 solid;  边框*/
  background: url("../images/footer图标.png") -0px -0px no-repeat;
}
/*:hover用于选择鼠标指针浮动在上面的元素*/
.pc:hover{
  background: url("../images/footer图标.png") -0px -50px no-repeat;
}
.qmkg{
  background: url("../images/footer图标.png") -360px -0px no-repeat;
}
.qmkg:hover{
  background: url("../images/footer图标.png") -360px -50px no-repeat;
}
.mac{
  width:65px;
  height:50px;    
   line-height: 150px;           
  margin:-150px 100px 100px 100px;
  border-radius: 10px; 
  background: url("../images/footer图标.png") -88px -0px no-repeat;
}
.mac:hover{
  background: url("../images/footer图标.png") -88px -50px no-repeat;
}
.super{
   background: url("../images/footer图标.png") -448px -0px no-repeat;
}
.super:hover{
   background: url("../images/footer图标.png") -448px -50px no-repeat;
}
.android{
  width:65px;
  height:50px; 
   line-height: 150px;              
  margin:-150px 100px 100px 200px;
  border-radius: 10px; 
  background: url("../images/footer图标.png") -176px -0px no-repeat;
}
.android:hover{
  background: url("../images/footer图标.png") -176px -50px no-repeat;
}
.Qplay{
  background: url("../images/footer图标.png") -536px -0px no-repeat;
}
.Qplay:hover{
  background: url("../images/footer图标.png") -536px -50px no-repeat;
}
.iphone{
  width:100px;
  height:50px;  
   line-height: 150px;             
 margin:-150px 100px 100px 300px;  
  border-radius: 10px; 
  background: url("../images/footer图标.png") -264px -0px no-repeat;
}
.iphone:hover{
  background: url("../images/footer图标.png") -264px -50px no-repeat;
}
.Fan{
  background: url("../images/footer图标.png") -624px -0px no-repeat;
}
.Fan:hover{
  background: url("../images/footer图标.png") -624px -50px no-repeat;
}
.footer_link_list{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
}
.footer_link_list_item{
    font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    min-width: 100px;
    margin-bottom: 12px;
}
.js_other_link{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    cursor: pointer;
    text-decoration: none;
    color: #999;
}
.footer_group_list{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    margin: 0;
    padding: 0;
    margin-left: -21px;
}
.footer_platform_list__item{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #999;
    padding: 0;
    list-style: none;
    float: left;
    min-width: 100px;
    margin: 0 5px 12px 0;
    text-indent: 25px;
}
.js_other_link{
      font-size: 14px;
    line-height: 1.5;
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    list-style: none;
    text-indent: 25px;
    cursor: pointer;
    text-decoration: none;
    color: #999;
}
</style>
</head>
<body>
	<div class="footer" role="footer">
		<div class="section_inner">
			<div class="footer_info">
				<div class="footer_download">
					<h3 class="footer_tit">下载QQ音乐客户端</h3>
          <div class="pc">&nbsp;PC版</div>
          <div class="mac">&nbsp;Mac版</div>
          <div class="android">Android版</div>
          <div class="iphone">iPhone版</div>
				</div>
				<div class="footer_product">
          <h3 class="footer_tit">特色产品</h3>
          <div class="pc qmkg">&nbsp;全民K歌</div>
          <div class="mac super">Super&nbsp;Sound</div>
          <div class="android Qplay">&nbsp;&nbsp;Qplay</div>
          <div class="iphone Fan">&nbsp;&nbsp;Fan直播伴侣</div>
        </div>
        <div class="footer_link">
          <h3 class="footer_tit">合作链接</h3>
          <ul class="footer_link_list">
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">CJ&nbsp;ENM</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯视频</a>
              </li>
              <li class="footer_link_list_item">
               <a href="#" class="js_other_link">手机QQ空间</a>
              </li>
              <li class="footer_link_list_item">
               <a href="#" class="js_other_link">最新版QQ</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯社交广告</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">电脑管家</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">QQ浏览器</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯微云</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">腾讯云</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">企鹅FM</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">智能电视网</a>
              </li>
              <li class="footer_link_list_item">
                <a href="#" class="js_other_link">当贝市场</a>
              </li>
          </ul>
        </div>
				<div class="footer_group">
          <h3 class="footer_tit">TME集团官网</h3>
          <ul class="footer_group_list">
            <li class="footer_platform_list__item">
              <a href="#" class="js_other_link">腾讯音乐</a>
            </li>
          </ul>
        </div>

				<div class="footer_platform"></div>
			</div>
			<div class="footer_copyright">
				<p>
				<a href="https://www.tencent.com/zh-cn">关于腾讯</a>
				<a href="https://www.tencent.com/en-us/index.html">|About Tencent</a>
				<a href="https://www.qq.com/contract.shtml">|服务条款</a>
				<a href="http://y.qq.com/y/static/tips/service_tips.html">|用户服务协议</a>
				<a href="https://y.qq.com/m/client/intro/privacy.html">|隐私政策</a>
				<a href="https://y.qq.com/vip/right_declare/index.html">|权力声明</a>
				<a href="https://e.qq.com/ads/">|广告服务</a>
				<a href="https://careers.tencent.com/">|腾讯招聘</a>
				<a href="https://kf.qq.com/">|客服中心</a>
				<a href="https://www.qq.com/map/">|网站导航</a>
				</p>
				<p>Copyright&nbsp;&copy;1998-2021&nbsp;Tencent.&nbsp;All&nbsp;Rights&nbsp;Reserved.</p>
				<p>
				腾讯公司
				<a href="">版权所有</a>
				网络文化经营许可证:
				<a href="">粤网文[2018]1999-0406</a>
				</p>
			</div>
		</div>
	</div>
</body>
</html>